<template>
    <div>
        <div class="crumbs">
            <div class="contentbox">
                <div class="contentsize">缴费录入</div>
                <div>
                    <el-button @click="cacelsubmitForm('ruleForm')">返回</el-button>
                </div>
            </div>
        </div>
        <div class="container">
            <div class="addtitle">合同信息</div>
            <div class="detailcontent">
                <div class="detailitem1">{{ projectdetail.fwdz }}</div>
                <el-form :inline="true" :model="projectdetail" class="demo-form-inline" label-position="right" size="small"
                    label-width="140px">
                    <el-form-item label="承租方：" style="width: 32%;">
                        {{ projectdetail.czf }}
                    </el-form-item>
                    <el-form-item label="承租方联系方式：" style="width: 32%;">
                        {{ projectdetail.czflxfs }}
                    </el-form-item>
                    <el-form-item label="合同签订时间：" style="width: 32%;">
                        <el-date-picker type="date" placeholder="选择合同签订时间" v-model="projectdetail.htqdrq"
                            value-format="yyyy-MM-dd"></el-date-picker>
                    </el-form-item>
                    <el-form-item label="合同到期时间：" style="width: 32%;">
                        <el-date-picker type="date" placeholder="选择合同到期时间" v-model="projectdetail.htzzrq"
                            value-format="yyyy-MM-dd"></el-date-picker>
                    </el-form-item>
                    <el-form-item label="月租金：" style="width: 32%;">
                        <el-input v-model="projectdetail.yzj" placeholder="请输入月租金" class="search-input"></el-input>
                    </el-form-item>
                    <el-form-item label="年租金：" style="width: 32%;">
                        <el-input v-model="projectdetail.nzj" placeholder="请输入月租金" class="search-input"></el-input>
                    </el-form-item>
                </el-form>
            </div>
            <div class="addtitle">缴费信息</div>
            <div class="detailcontent">
                <el-form :inline="true" :model="projectdetail" class="demo-form-inline" label-position="right" size="small"
                    label-width="140px">
                    <el-form-item label="交返款：" style="width: 32%;">
                        <el-select v-model="projectdetail.jfk" placeholder="请选择交返款" @change="getjfkvalue($event)">
                            <el-option v-for="item in jfklist" :key="item.code" :label="item.name" :value="item.code">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="交款方式：" style="width: 32%;">
                        <el-select v-model="projectdetail.jffs" placeholder="请选择交款方式">
                            <el-option v-for="item in jkfslist" :key="item.code" :label="item.name" :value="item.code">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="交款金额：" style="width: 32%;" v-if="jksjow">
                        <el-input v-model="projectdetail.jkje" placeholder="请输入交款金额" class="search-input"></el-input>
                    </el-form-item>
                    <el-form-item label="返款金额：" style="width: 32%;" v-if="!jksjow">
                        <el-input v-model="projectdetail.fkje" placeholder="请输入返款金额" class="search-input"></el-input>
                    </el-form-item>
                    <el-form-item label="日期：" style="width: 32%;">
                        <el-date-picker type="date" placeholder="选择日期" v-model="projectdetail.rq"
                            value-format="yyyy-MM-dd"></el-date-picker>
                    </el-form-item>
                    <el-form-item label="备注：" style="width: 100%;">
                        <el-input type="textarea" :autosize="{ minRows: 4 }" placeholder="请输入备注"
                            v-model="projectdetail.note" style="width: 900px;">
                        </el-input>
                    </el-form-item>
                    <el-form-item label="旧欠金额：" style="width: 32%;" v-if="jksjow">
                        1000
                    </el-form-item>
                    <el-form-item label="本次补缴旧欠金额：" style="width: 32%;" v-if="jksjow">
                        <el-input v-model="projectdetail.jkje" placeholder="请输入本次补缴旧欠金额" class="search-input"></el-input>
                    </el-form-item>
                </el-form>
            </div>
            <div v-if="jksjow">
                <div style="overflow: hidden;">
                    <el-table :data="tableData" style="width: 100%" :header-cell-style="tableHeaderColor"
                        :row-style="tablerowColor" border>
                        <el-table-column prop="ysyf" label="应收月份" align="center"> </el-table-column>
                        <el-table-column prop="ksrq" label="开始时间" align="center"> </el-table-column>
                        <el-table-column prop="zzrq" label="终止时间" align="center"> </el-table-column>
                        <el-table-column prop="ysje" label="应收金额（月）" align="center"> </el-table-column>
                        <el-table-column prop="ssje" label="实收金额" align="center">
                            <template slot-scope="scope">
                                <span v-if="scope.row.ssje">{{ scope.row.ssje }}</span>
                                <div class="noBor" v-else>
                                    <el-input v-model="scope.row.ssje" placeholder="请输入月租金"></el-input>
                                </div>
                            </template>
                        </el-table-column>
                        <el-table-column prop="jkfs" label="交款方式" align="center">
                            <template slot-scope="scope">
                                <span v-if="scope.row.jkfs">{{ scope.row.jkfs }}</span>
                                <div class="noBor" v-else>
                                    <el-select v-model="scope.row.jffs" placeholder="请选择交款方式">
                                        <el-option v-for="item in jkfslist" :key="item.code" :label="item.name"
                                            :value="item.code">
                                        </el-option>
                                    </el-select>
                                </div>
                            </template>
                        </el-table-column>
                        <el-table-column prop="skrq" label="收款日期" align="center"> </el-table-column>
                    </el-table>
                    <el-button type="primary"
                        @click="gettime(projectdetail.htqdrq, projectdetail.htzzrq, projectdetail.yzj, projectdetail.nzj, projectdetail.jffs)"
                        style="float:right;margin-top: 14px;">按年月分配交款金额</el-button>
                </div>
                <div style="margin: 14px auto;width:180px">
                    <el-button type="primary">保存</el-button>
                    <el-button type="primary">预转已</el-button>
                </div>
                <div class="addtitle">过往缴费记录</div>
                <el-table :data="tableData1" style="width: 100%" :header-cell-style="tableHeaderColor"
                    :row-style="tablerowColor" border>
                    <el-table-column prop="skrq" label="收款日期" align="center"> </el-table-column>
                    <el-table-column prop="skfs" label="收款方式" align="center"> </el-table-column>
                    <el-table-column prop="ssje" label="实收金额" align="center"> </el-table-column>
                    <el-table-column prop="bjkje" label="补旧款金额" align="center"> </el-table-column>
                    <el-table-column prop="ysje" label="已收金额" align="center"> </el-table-column>
                    <el-table-column prop="ysje" label="预收金额" align="center"> </el-table-column>
                    <el-table-column prop="yzyje" label="预转已金额" align="center"> </el-table-column>
                    <el-table-column prop="bz" label="备注" align="center"> </el-table-column>
                </el-table>
            </div>

        </div>
    </div>
</template>
<script>
import { builddetail, roomdetails, jyglupdate, download, jygldetail } from '@/api/index';
import global from '@/components/common/httpurl.vue'
import valueList from '@/components/common/valueList.vue'
export default {
    name: 'jflradd',
    data() {
        return {
            jksjow: true,//交款内容
            tableData: [],//缴费信息
            tableData1: [],//过往缴费记录
            httpUrl: global.httpUrl,//公共地址
            jfklist: valueList.jfklist,//交返款
            jkfslist: valueList.jkfslist,//交款方式
            filefileList: [],//文件列表
            fileListshandle: [],
            // 请求表头信息
            myHeaders: {
                'token': localStorage.getItem('token')
            },
            form: {
                create_name: "",
                create_name_id: "",
                create_time: "",
                current: 0,
                fcbl: "",
                fj: '',
                glfs: '',
                id: "",
                note: "",
                pageSize: 0,
                qsrq: "",
                relid: "",
                status_code: 1,
                stgldw: "",
                type: "",
                update_name: "",
                update_name_id: "",
                update_time: "",
                wtdw: "",
                zzrq: ""
            },
            fileList: [],
            fromlist: [],
            projectdetail: {
                jfk: '交款'
            },
        };
    },
    methods: {
        // 列表样式
        tableHeaderColor({ row, column, rowIndex, columnIndex }) {
            if (rowIndex === 0) {
                return 'background-color: #f7f7f7;color:black;height: 54px;font-weight: 500;font-size:14px;font-variant:tabular-nums'
            }
        },
        tablerowColor({ row, rowIndex }) {
            return 'height: 42px;font-size:14px;'
        },
        // 月份划分(列表数据计算)
        gettime(start, end, myzj, zzj, jkfss) {
            let ranges = []
            let xyzj = ''
            let xymyzj = ''
            let [i, j] = [start, end].map(i => new Date(i)).sort((a, b) => a - b)
            console.log([i, j])

            while (i <= j) {
                const ssje = ''//实际金额
                const ksrq = i.toISOString().slice(0, 10)//开始日期
                const ysyf = ksrq//应收月份
                const jkfs = ''//付款方式
                i = new Date(i.getFullYear(), i.getMonth() + 1, 0, i.getHours())
                const zzrq = new Date(Math.min(+i, +j)).toISOString().slice(0, 10)//终止日期
                const skrq = zzrq//收款日期
                const ysje = myzj//应收金额
                i.setDate(i.getDate() + 1)
                if (zzj >= myzj) {
                    zzj = zzj - myzj
                    ssje = myzj
                    jkfs = jkfss
                } else {
                    ssje = ''
                    jkfs = ''
                }
                ranges.push({ ksrq, ysyf, zzrq, ysje, ssje, jkfs, skrq })
            }
            // 第一条
            const firstval=ranges[0]
            firstval.ssje= (firstval.ysje/(firstval.zzrq.split('-')[2]))*(firstval.zzrq.split('-')[2]-firstval.ksrq.split('-')[2]).toFixed(2)//数组第一条实际金额
            // 最后一条
            const lastval=ranges[ranges.length-1]
            console.log(lastval.zzrq.split('-')[0])
            console.log((lastval.zzrq.split('-')[1])+1)
            var d = new Date(lastval.zzrq.split('-')[0],(lastval.zzrq.split('-')[1]),0);
            console.log('d',d.getDate(),lastval.ysje/d)
            lastval.ssje= ((lastval.ysje/d.getDate())*((lastval.zzrq.split('-')[2])-(lastval.ksrq.split('-')[2])+1)).toFixed(2)//数组最后一条实际金额
            this.tableData = ranges
            console.log(ranges)
        },
        // 取消
        cacelsubmitForm() {
            this.$router.go(-1);
        },
        // 获取交付款值
        getjfkvalue(value) {
            console.log(value)
            if (value == '返款') {
                this.jksjow = false
            }else{
                this.jksjow = true
            }
        },
        // 委托运营详情
        jygldetail(data) {
            jygldetail(data).then((res) => {
                this.form = res.data;
                this.fromlist = res.data.fj;
                console.log(this.form.fj)
            });
        },
        // 房间详情
        roomdetails(data) {
            roomdetails(data).then((res) => {
                this.projectdetail = res.data;
            });
        },
        // 楼幢详情
        builddetail(data) {
            builddetail(data).then((res) => {
                this.projectdetail = res.data;
            });
        },
    },
    created() {
        console.log('params', this.$route.params)
    }
};
</script>
<style>
.el-upload-list {
    width: 60%;
}

.el-upload--text {
    width: auto;
    height: 80px;
    overflow: hidden;
    border: none;
}
</style>
<style scoped>
.container {
    overflow: hidden;
}

.crumbs {
    background-color: #fff;
    padding: 20px 20px;
}

.indexTitle {
    margin-bottom: 20px;
}

.contentbox {
    display: flex;
    justify-content: space-between;
}

.contentsize {
    font-size: 18px;
    font-weight: 700;
    line-height: 32px;
    color: #606266;
}

.handle-box {
    overflow: hidden;
}

.addtitle {
    width: 100%;
    border-bottom: 1px solid #eeeeee;
    padding-bottom: 20px;
    box-sizing: border-box;
    margin-bottom: 20px;
    font-weight: 700;
}

.buttonCenter {
    width: 12%;
    margin: auto;
}

.unloadTitle {
    text-align: left;
    padding-bottom: 10px;
    box-sizing: border-box;
    color: #606266;
}

/* 搜索按钮 */
.searchcolor {
    background-color: #7090ff;
}

.detailcontent {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}

.detailcontent .detailitem {
    /* float: left; */
    width: 33%;
    margin-bottom: 30px;
}

.detailcontent .detailitem1 {
    /* float: left; */
    width: 99%;
    margin-bottom: 30px;
    font-weight: 700;
    color: #008A94;
}

.detailcontent .detailitem2 {
    /* float: left; */
    width: 99%;
    margin-bottom: 30px;
}

/* 项目文件 */
.filebox {
    text-align: center;
    margin-right: 10px;
    cursor: pointer;
}

.fileboxitem:hover {
    color: #7090ff;
}

.deleteitem {
    color: red;
}

.deleteitem:hover {
    color: #eeeeee;
}
</style>